<template>
  <div class='page grey-stage home'>
    <top-filter v-show="!isShowSearch" :filterOptions="filterOptions" @load-more="loadFilter" :activeItem="filterActiveItem" @change-filter="changeFilterValue" @item-selected="topFilterItemSelected" :cancelSelect="cancelSelect" ref="topFilter"></top-filter>
    <div class="home-container" ref="container" :style="'padding-top:' + this.scrollerTop + 'px; height:' + this.scrollerHeight + 'px'">
      <div v-if="orderListShow"
      v-infinite-scroll="load"
      :infinite-scroll-disabled="loading"
      :infinite-scroll-distance="200">
        <!-- <scroller  class="pdscroll" :on-infinite="load" :on-refresh="refresh" ref="my_scroller" :noDataText="noDataText" heieght="87%"> -->
        <div style="padding-bottom: 30px;">
          <div class="rela-tip-main">
            <div class="rela-result-tip top-list-counter">总计{{ total }}条记录</div>
          </div>
          <section class="sales-executive mgt-6" v-for="item in data" >
            <div class="order-list" >

              <div class="content">
                <div class="custom">
                  <span class="custom_info">{{ item.parent_name }}</span>
                  <span class="custom_info">{{ item.mobile_num }}</span>
                  <span class="time">{{ item.insert_time }}</span>
                  <div class="invalid-clue" v-if="item.is_valid === 0" ></div>
                </div>
                <div class="clue_desc">
                  <p>{{ item.clue_desc }}</p>
                </div>
                <div class="status">
                  <div class="property-item">顾问:{{ item.assist_name }}</div>

                  <div class="property-item" v-if="item.clue_type === 'NC#'">新客户</div>
                  <div class="property-item" v-else-if="item.clue_type === 'ED#'">更新资料</div>
                  <div class="property-item" v-else-if="item.clue_type === 'GH#'">关怀</div>
                  <div class="property-item" v-else-if="item.clue_type === 'YY#'">预约</div>
                  <div class="property-item" v-else-if="item.clue_type === 'DF#'">到访</div>
                  <div class="property-item" v-else-if="item.clue_type === 'LDF'">补录到访</div>
                  <div class="property-item" v-else-if="item.clue_type === 'FS#'">首次签约</div>
                  <div class="property-item" v-else-if="item.clue_type === 'XB#'">续报签约</div>
                  <div class="pull-right">
                    <router-link class="view-detail" :to="{path:'normal-clients-detail',query:{custom_id:item.custom_id,custom_type:item.custom_type === 'PT#'?1:0,id:item.custom_id,back:false,dd_nav_bgcolor:'FF5E97F6',action:''}}">查看详情<i class="arrow-go-grey"></i></router-link>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <div class="center-content-block load-more"
            @click="$getClueAssist()"
            style="padding: 15px 0;"
            v-if="hasMoreData === true && loading !== true">
            <span>点击加载</span>
          </div>
          <div class="no-data-tip" style="margin-top:15px;margin-bottom:15px;" v-if="loading === true && hasMoreData === true" >
            <span>加载数据中...</span>
          </div>
        </div>
        <!-- </scroller> -->
      </div>
      <div v-else >
        <div class="rela-tip-main">
          <div class="rela-result-tip top-list-counter">总计{{ total }}条记录</div>
        </div>

        <load-more :show-loading="loadMoreShow" :tip="loadMoreText" background-color="#fbf9fe"></load-more>
      </div>
      <div >
        <confirm
          v-model="cancelConfirmShow"
          :close-on-confirm="false"
          title="操作提示"
          @on-confirm="onConfirm">
          <p style="text-align:center;">确认撤消?</p>
        </confirm>
      </div>
    </div>
    <crm-cover v-if="isShowCover" :hideCoverOnClick="true"></crm-cover>
    <crm-tabbar activeItem='workbench' ref="tabbar"></crm-tabbar>
  </div>
</template>
<script>
  import {loadTeamSettings, loadMemberSettings, loadFilterFunc} from '../lib/filter'
  import { LoadMore, Confirm } from 'vux'
  import crmTabbar from '../components/crm-tabbar'
  import salesTarget from '../components/sales-target'
  import salesPerformance from '../components/sales-performance'
  import salesExecutive from '../components/sales-executive'
  //  import FunnelModel from '../components/funnel-model'
  import topFilter from '../components/top-filter'
  import crmCover from '../components/crm-cover'
  // import Scroller from 'vue-scroller'
  import store from '../store'
  import { mapState } from 'vuex'

  export default {
    data () {
      let overHeight = document.body.scrollHeight + 22
      return {
        containerHeight: 'height:' + overHeight + 'px;',
        orderListShow: false,
        loadMoreShow : true,
        loading: false,
        hasMoreData: true,
        loadMoreText : '正在加载',
        noDataText : "",
        page_index : 1,
        page_size : 10,
        last_page : 0,
        total: 0,
        cancelConfirmShow: false,
        order_sn: "",
        data: {},
        scrollerHeight: '',
        scrollerTop: '',
        isShowSearch: false,
        cancelSelect: null,
        filterActiveItem:{},
        filterData:{},
        hasMoreData: true,
        submitData:{},
        calendar: 4,//本月
        suid:0,
        team_id:0,
        custom_status:'',
        is_valid:-1,
        is_extra:-1,
        type : 2,//2负责人 3所属团队
        filterOptions: [
          {
            title: '本月',
            class: 'txt-center',
            value: '4',
            name: 'insert_time',
            checked: '4',
            options: [
              {
                text: '今年',
                value: '0'
              },
              {
                text: '去年',
                value: '1'
              },
              {
                text: '本季度',
                value: '2'
              },
              {
                text: '上季度',
                value: '3'
              },
              {
                text: '本月',
                value: '4'
              },
              {
                text: '上月',
                value: '5'
              },
              {
                text: '本周',
                value: '6'
              },
              {
                text: '上周',
                value: '7'
              },
              {
                text: '今天',
                value: '8'
              },
              {
                text: '昨天',
                value: '9'
              }
            ]
          },
          {
            checked:"2",
            class:"txt-center",
            name:"filter",
            options:[

            ],
            title:"筛选",
            value:"6"
          },

        ]
      }
    },
    components: {
      crmTabbar,
      salesTarget,
      salesPerformance,
      salesExecutive,
      topFilter,
      crmCover,
      LoadMore,
      Confirm
    },
    mounted () {
      this.filterOptions[0].title = this.filterOptions[0].options[parseInt(this.$route.query.calendar)].text
      this.filterOptions[0].checked = this.$route.query.calendar
      this.caculateScroller()
      loadTeamSettings().then((options) => {
        if (options === false) {
          this.filterTeamIndex = 0
          return
        }
        if(this.user.is_team_manager !== 1 && this.user.is_system_manager !== 1){

          return
        }

        if(options[0][1].options[2].options[0].value === '-1'){
          options[0][1].options[2].options.splice(0,1)
        }
        options[0][1].options[2].checked = parseInt(this.$route.query.team_id)

        this.filterOptions[1].options.push(options[0][1].options[2])
        this.initMember()

      })


    },
    methods: {
      initMember () {
        loadMemberSettings().then((options) => {

          if (options === false) {
            this.filterMemberIndex = 0
            return
          }

          options[0][1].options[1].show = true

          if(options[0][1].options[1].options[0].value === '-1'){
            options[0][1].options[1].options.splice(0,1)
            options[0][1].options[1].checked = options[0][1].options[1].options[0].value

          }

          if(this.user.is_team_manager === 1 || this.user.is_system_manager === 1){
            options[0][1].options[1].checked = parseInt(this.$route.query.suid)

            this.filterOptions[1].options.push(options[0][1].options[1])

          }else{

            for (let i = options[0][1].options[1].options.length - 1; i >= 0; i--) {
              if (options[0][1].options[1].options[i].value !== this.user.id) {
                options[0][1].options[1].options.splice(i, 1);
              }
            }
            options[0][1].options[1].checked = parseInt(this.$route.query.suid)

//            options[0][1].options[1].checked = options[0][1].options[1].options[0].value

            this.filterOptions[1].options.push(options[0][1].options[1])


          }
//          console.log(this.storeFilterOptions)
//          this.storeFilterOptions[1].options[5].options.splice(0,1)
//          this.storeFilterOptions[1].options[5].checked = ''
//          this.filterOptions[1].options.push(this.storeFilterOptions[1].options[5])
          this.filterOptions[1].options.push(
            {
              checked:"",
              name:"custom_status",
              options:[
                {
                  text:"新客户",
                  value:"NC%23"
                },
                {
                  text:"关怀",
                  value:"GH%23"
                },
                {
                  text:"预约",
                  value:"YY%23"
                },
                {
                  text:"到访",
                  value:"DF%23"
                },
                {
                  text:"首次签约",
                  value:"FS%23"
                },
                {
                  text:"续报签约",
                  value:"XB%23"
                },
              ],
              text:"跟进状态",
              value:"5"
            },
            { checked:parseInt(this.$route.query.is_valid),
              name:"is_valid",
              options:[
//                {
//                  text:"不限",
//                  value:-1
//                },
                {
                  text:"有效",
                  value:1
                },
                {
                  text:"无效",
                  value:0
                }
              ],
              text:"是否有效",
              value:'10'
            },
            { checked:'',
              name:"is_extra",
              options:[
//                {
//                  text:"不限",
//                  value:-1
//                },
                {
                  text:"补录",
                  value:1
                },
                {
                  text:"非补录",
                  value:0
                }
              ],
              text:"是否补录",
              value:'11'
            },
          )

          setTimeout(() => {
            this.$getClueAssist(this.calendar,this.type);
          })

        })
      },
      refresh (iscroll) {
        console.log('refresh')
        this.page_index = 1
        this.$getClueAssist(this.calendar,this.type);
      },
      load (iscroll) {
        console.log('load')
        if(this.last_page > this.page_index){
          this.$getClueAssist(this.calendar,this.type);
        }else{
          this.noDataText = "没有更多数据"
          // this.$refs.my_scroller.finishInfinite(true);
          // this.$refs.my_scroller.finishPullToRefresh();
        }
      },
      cancel(order_sn){
        this.cancelConfirmShow = true
        this.order_sn = order_sn
      },
      onConfirm(){
        if(this.order_sn){
          this.saveOrderStatus(this.order_sn)
        }
      },
      caculateScroller () {
        const winHeight = window.innerHeight
        const filterHeight = this.$refs['topFilter'].$el.offsetHeight
        const tabbarHeight = this.$refs['tabbar'].$el.offsetHeight
        this.scrollerTop = filterHeight
        this.scrollerHeight = winHeight - filterHeight - tabbarHeight
      },
      loadFilter:loadFilterFunc,
      topFilterItemSelected (item, index) {
        console.log('topFilterItemSelected')
        if (typeof item.name !== 'undefined' && item.name === 'search') {
          this.isShowSearch = !this.isShowSearch // 搜索栏打开
          this.cancelSelect = null
        } else {
          this.isShowSearch = false // 打开的是筛选栏
        }

        if (this.isShowSearch === false) {
          if (this.isShowSearch === false) {
            this.keyword = ''
//            this.emptyCustoms()
//            this.getCustoms()
          }
        }
      },
      changeFilterValue (filterOptions) {
        filterOptions[0].options.forEach((range) => {
          if (this.filterOptions[0].checked === range.value) {
            this.filterOptions[0].title = range.text
          }
        })

        this.$getClueAssist()
      },
      saveOrderStatus(order_sn) {
        this.cancelConfirmShow = false
        this.$vux.loading.show({text:'进行中'})
        store.dispatch('saveOrderStatus',order_sn).then((response) => {
          if(response.data.errcode === 0){
            this.$vux.loading.hide()
            this.page_index = 1
            this.getOrders()
          }else{
            this.$vux.loading.hide()
          }
        }).catch((error) => {
          console.log(error)
          this.$vux.loading.hide()
        })
      },

      $getClueAssist (calendar,type) {
        if (this.hasMoreData === false) {
            this.loading = true
            return
        }

        if (this.loading === true) return

        this.total = 0
        this.loadMoreText = "正在加载"
        // this.loadMoreShow = true
        this.loading = true
        if (!calendar) calendar = this.filterOptions[0].checked
        type = this.filterOptions[1].checked

        var that = this
        let params = {}
        params.calendar = calendar
//        params.is_valid = this.$route.query.is_valid
//        params.suid = this.$route.query.suid
        params.suid = this.filterOptions[1].options[1].checked
        params.team_id = this.filterOptions[1].options[0].checked
        params.clue_type = this.filterOptions[1].options[2].checked
        params.is_valid = this.filterOptions[1].options[3].checked
        params.is_extra = this.filterOptions[1].options[4].checked


//        switch (type){
//          case '2':
//            params.suid = this.filterOptions[1].options[1].checked
//            break;
//          case '3':
//            params.team_id = this.filterOptions[1].options[0].checked
//            break;
//          case '5':
//            params.clue_type = this.filterOptions[1].options[2].checked
//            break;
//          case '10':
//            params.is_valid = this.filterOptions[1].options[3].checked
//            break;
//          case '11':
//            params.is_extra = this.filterOptions[1].options[4].checked
//            break;
//        }
        this.calendar = params.calendar
        this.type = type
        params.page_index = that.page_index
        params.page_size  = that.page_size
        console.log(params)
        store.dispatch('getClueAssist', params).then((response) => {
          this.loading = false;
          if (response.data.errcode === 0) {
            let res = response.data.results.data
            if(res.length > 0){
              that.last_page = response.data.results.last_page
              that.orderListShow = true
              that.total = response.data.results.total
              if(that.page_index > 1){
                for (let item in res) {
                  that.data.push(res[item])
                }
              }else{
                that.data = {}
                that.data = res
              }
            }else{
              that.orderListShow = false
              that.loadMoreText = "暂无数据"
              that.loadMoreShow = false
            }
          } else {
            that.hasMoreData = false
            console.debug('系统出错请联系管理员!', JSON.stringify(response.data))
          }
          this.page_index++
          const totalPage = Math.ceil(parseInt(this.total) / parseInt(this.page_size))
          this.hasMoreData = this.page_index < totalPage
          console.log(this.page_index, totalPage)

        }).catch(() => {
          that.hasMoreData = false
        })
      },

    },
    computed: {
      ...mapState({
        isShowCover: state => state.app.isShowCover,
        totalTarget: state => state.app.target,
        user: state => state.app.user,
//        storeFilterOptions: state => state.app.filterOptions,
      })
    }
  }
</script>
<style lang="less">

  @import "../less/base";

  section{
    background-color: white;
  }

  .home-container {
    overflow-x: hidden;
    overflow-y: auto;
    /*-webkit-overflow-scrolling: touch;*/
  }

  .order-list{
    /*margin: 10px 10px;*/
    margin-left: 10px;
    margin-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;

    .content{
      font-size: 14px;
      position: relative;
      .custom{
        height: 2rem;
      }
      .custom_info{
        font-size: 16px;

      }
      .time{
        font-size: 13px;
        float: right;
      }
      .clue_desc{
        border-bottom: 1px solid #efeff4;
        padding-bottom: 1rem;
        padding-top: 0.5rem;
      }
      .property-item {
        display: inline-block;
        // padding-right: 12px;
        line-height: 12px;
        height: 12px;
        font-size: 12px;
        border: 1px solid #efeff4;
        color: #a9a6a6;
        border-radius: 6px;
        padding: 3px 8px;
      }
      .status{
        padding-top: 0.3rem;
        padding-bottom: 0.2rem;
      }
    }
  }

  .home {
    // -webkit-overflow-scrolling: touch;
  }
</style>
